<!--
* @description 维保
* @author zywu
* @date 2020/12/14 15:26:45
!-->
<template>
  <div class="section section-base section-maintain">
    <div class="font24 colorYellow">维保</div>
    <div style="padding-top: 20px;">
      <div class="font20">全年共完成任务</div>
      <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
        <count-to class="font40" :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
        <div>个</div>
      </div>
    </div>
    <div id="page_8">
      <div id="page_8_radar" style="width:100%;height:100%;margin-top: 30px;"></div>
    </div>
    <img src="/ilink-app-h5-zd/static/img/ilink_1578460662248.png" alt class="page_8_maintenance_img" />
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataCount: 0,
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
  },
  methods: {
    init() {
      this.dataCount = this.reportData.maintain.total
      let data = this.reportData
      let rarDarData = []
      rarDarData.push(
        data.maintain.inspectCount,
        data.maintain.maintainCount,
        data.maintain.singleTestCount,
        data.maintain.testCount
      )
      let maxRadar = Math.max(...rarDarData)
      let page_8_radarData = [
        { text: `维保巡查${data.maintain.inspectCount}`, max: maxRadar },
        { text: `保养${data.maintain.maintainCount}`, max: maxRadar },
        { text: `单点测试${data.maintain.singleTestCount}`, max: maxRadar },
        { text: `联动测试${data.maintain.testCount}`, max: maxRadar },
      ]
      this.getRadar(page_8_radarData, rarDarData)
    },
    getRadar(page_8_radarData, rarDarData) {
      let myChartRadar = echarts.init(document.getElementById('page_8_radar'))
      let data = page_8_radarData
      let option = {
        //鼠标效果
        textStyle: {
          color: '#fff',
          fontSize: 11,
          fontWeight: 'normal',
        },
        radar: [
          {
            indicator: data,
            //大小
            radius: 80,
            //角度
            startAngle: 90,
            //层
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                color: '#a82f2c',
              },
            },
            name: {
              textStyle: {
                color: '#fff',
                fontSize: 11,
                fontWeight: 'normal',
              },

              formatter: (text) => {
                text = text.replace(/\S{4}/g, function (match) {
                  return match + '\n'
                })
                return text
              },
            },
            splitLine: {
              lineStyle: {
                color: ['#a82f2c'],
              },
            },
            splitArea: {
              areaStyle: {
                color: [
                  'rgba(255, 255, 255, 0)',
                  'rgba(255, 255, 255, 0)',
                  'rgba(255, 255, 255, 0)',
                  'rgba(255, 255, 255, 0)',
                ],
              },
            },
          },
        ],
        series: [
          {
            name: '雷达图',
            type: 'radar',
            lineStyle: {
              normal: {
                width: 3,
                color: '#f6c949',
              },
            },
            areaStyle: {
              normal: {
                color: '#EA9312',
                opacity: 0.5,
              },
            },
            symbolSize: 0.1,
            data: [rarDarData],
          },
        ],
      }
      myChartRadar.clear()
      myChartRadar.setOption(option)
    },
  },
  mounted() {},
}
</script>